<template>
	<!-- 选择户主 -->
	<view class="building-container">
		<view class="building-top">
			<view class="top-search">
				<u-search placeholder="搜索" shape="square" v-model="keywords" @search="handleSearch" @custom="handleSearch"></u-search>
			</view>
		</view>
		<view class="building-content">
			<view class="content-item" v-for="(item,index) in ResidentList" :key="index" @click="handleGoHourseInfo(index)">
				<view class="left">{{ item.name }}</view>
				<view class="right"><image v-if="item.isact==true" src="../../../static/icon/duihao.png" mode="widthFix"></image></view>
			</view>
		</view>
		<u-loadmore :status="status" icon-color="#007AFF" />
	</view>
</template>

<script>
	export default {
		data() {
			return {
				pageNo:1,
				pageSize:20,
				status: 'loading',
				tolnum:0,
				ResidentList: [],
				keywords: '',
			}
		},
		mounted() {
			this.getResident()
		},
		onLoad(options) {
			this.type = options.type
		},
		// 上拉
		onReachBottom() {
			this.pageNo = this.pageNo + 1
			if(this.pageNo > this.tolnum) {
				return this.status = 'nomore'
			}
			this.getResident()
		},
		// 下拉
		onPullDownRefresh() {
			this.ResidentList=[]
			this.pageNo = 1;
			this.status = 'loading'
			this.getResident()
			setTimeout(function () {
			    uni.stopPullDownRefresh();
			}, 1500);
		},
		methods: {
			//搜索
			handleSearch() {
				if(this.keywords.trim().length == 0) {
					return uni.showToast({
						title:'请输入关键字',
						icon:'none'
					})
				}
				let params = {
					keywords:this.keywords
				}
				this.$u.api.familySearch(params)
					.then(res => {
						// console.log(res)
						if(res.code == 200) {
							this.ResidentList = []
							if(res.result.length == 0) {
								return this.status = 'nomore'
							}
							res.result.forEach(item => {
								this.ResidentList.push({
									name:item.familyHolderName,
									id:item.id,
									familyAddress:item.familyAddress,
									isact:false
								})
							})
						}
					})
					.catch(err => {
						console.log(err)
					})
			},
			handleGoHourseInfo(index) {
				this.ResidentList.forEach((item,i) => {
					if(index == i) {
						item.isact = true
						uni.setStorageSync('domicile',item)
						console.log(item)
						setTimeout(() => {
							uni.navigateBack({
								delta:1
							})
						},900)
					} else {
						item.isact = false
					}
				})
			},
			// 人口
			getResident() {
				let params = {
					pageNo:this.pageNo,
					pageSize:this.pageSize,
					userType:this.type
				}
				this.$u.api.getFamilyList(params)
					.then(res => {
						// console.log(res)
						if(res.code == 200) {
							this.tolnum = res.result.pages
							if (res.result.pages == 0) {
								this.status = 'nomore'
							}
							res.result.records.forEach(item => {
								this.ResidentList.push({
									name:item.familyHolderName,
									id:item.id,
									isact:false,
									familyAddress:item.familyAddress
								})
							})
							this.status = 'nomore'
							if(this.pageNo == 1) {
								if(this.pageNo == this.tolnum) {
									this.status = 'nomore'
								}
							}
						}
						
					})
					.catch(err => {
						console.log(err)
						this.status = 'nomore'
						uni.showToast({
							icon:'none',
							title:'请稍后再试'
						})
					})
			}
		},

	}
</script>

<style lang="scss" scoped>
	.building-container {
		background-color: #f5f6f7;
		min-height: 100vh;
		.building-top {
			background-color: #fff;
			position: fixed;
			top: 0;
			left: 0;
			width: 100%;
			height: 120rpx;
			box-shadow: 3px 3px 3px #eee;
			padding: 20rpx;
			z-index: 10;
			display: flex;
			justify-content: center;
			align-items: center;
			.top-search{
				width: 100%;
			}
		}
		.building-content {
			padding: 140rpx 20rpx 20rpx 20rpx;

			.content-item {
				display: flex;
				justify-content: space-between;
				align-items: center;
				background-color: #fff;
				margin-bottom: 10rpx;
				padding: 20rpx;
				border-bottom: 1px solid #cecece;
				height: 80rpx;
				border-radius: 8rpx;
				.left:{
					color:#999;
					font-size: 27rpx;
				}
				.right{
					width: 40rpx;
				}
			}
		}
	}
</style>
